import BiDialogComponent from 'other/dialog.vue';
import BiToastComponent from 'other/toast.vue';
import BiLoadingComponent from 'other/loading.vue';
/**
 * 对话框
 * 
 * @param {Object} config 配置项
 * @param {string} config.title 标题
 * @param {boolean} config.closeable 是否能关闭对话框
 * @param {boolean} config.header 是否显示头部
 * @param {string} config.content 内容
 * @param {string} config.type 类型  'vue' | 'html' | 'iframe' | 'dom' 
 * @param {string} config.style 样式类名
 * @param {string} config.width 宽度 默认值 500
 * @param {string} config.loading 加载中
 * @param {string|boolean|object} config.okButton 确定按钮设置
 * @param {string|boolean|object} config.cancelButton 取消按钮设置
 * @param {function} config.ok 确定事件
 * @param {function} config.cancel 取消事件
 * @param {function} config.callback 回调事件
 * @param {array} config.buttons 按钮列表
 */
function dialog(config){
    if (config==undefined) config = {};
    let dom = document.createElement('div');
    document.body.appendChild(dom);
    dom.classList.add('bi-dialog-wrapper');

    top.biIndex += 10;

    dom.style.zIndex = top.biIndex ;

    if (config['mark']!=undefined){
        if (config['mark']){
            dom.classList.add('mask');   
        }
        delete config['mark'];
    }else{
        dom.classList.add('mask');
    }
    let app =  Vue.createApp(BiDialogComponent);
    let object  = app.mount(dom);
    
    object.init(config);
    object._dom = dom;
    object.show();
    
    return object;
}


/**
 * 弹出提示
 * 
 * @param {string|object} message 提示内容
 * @param {string} message.type 提示类型 'info' |'success' | 'warning' | 'error'
 * @param {string} message.text 提示内容
 * @param {function} callback 回调
 */
function alert(message,callback = ()=>{}){
    if (message==undefined) message = {
        type:'info',
        text:'',
        okButton:'确定'
    };


    if (typeof message =='string'){
        message = {
            type: 'info',
            text: message,
            okButton:'确定'
        }
    }
    let buttonType = 'primary'
    switch(message.type){
        case 'info':
            message.title = '提示';
            buttonType = 'primary';
            break;
        case'success':
            message.title = '成功';
            buttonType ='success';
            break;
        case 'warning':
            message.title = '警告';
            buttonType = 'warning';
            break;
        case 'error':
            message.title = '错误';
            buttonType = 'danger';
            break;
        default:
            message.title = '提示';
            break;
    }
    

    let config = {
        title:message.title,
        type:'html',
        width:300,
        content: messageHtml(message.type,message.text),
        buttonAlign:'center',
        okButton:{
            text:message.okButton,
            type:buttonType,
            click:(e)=>{
                
                callback();
                e.close();
            }
        }
    };
    
    dialog(config);

}


function confirm(message,ok = ()=>{},cancel = ()=>{}){
    if (message==undefined) message = {
        type:'info',
        text:''
    };

    if (typeof message =='string'){
        message = {
            type: 'info',
            text: message
        }
    }

    let buttonType = 'primary'
    switch(message.type){
        case 'info':
            message.title = '提示';
            buttonType = 'primary';
            break;
        case'success':
            message.title = '成功';
            buttonType ='success';
            break;
        case 'warning':
            message.title = '警告';
            buttonType = 'warning';
            break;
        case 'error':
            message.title = '错误';
            buttonType = 'danger';
            break;
        default:
            message.title = '提示';
            break;
    }

    let config = {
        title:message.title,
        type:'html',
        width:300,
        content: messageHtml(message.type,message.text),
        okButton:{
            type:buttonType
        },
        cancelButton:true,
        cancel,
        ok
    };

    dialog(config);
}


/**
 * 弹出消息提示
 * 
 * @param {*} message
 * @param {string} message.title 标题
 * @param {string} message.text 内容
 * @param {string} message.type 类型
 * @param {string} message.icon 图标
 * @param {function} callback 回调
 */
function toast(message,callback = ()=>{}){
    let config = {};
    if (typeof message=='string'){
        config.text = message
    }

    if (typeof message =='object'){
        config.text = message.text??'';
        if (message.type) config.type = message.type;
        if (message.autoClose) config.autoClose = message.autoClose;
        if (message.title) config.title = message.title;
        if (message.icon) config.icon = message.icon;
    }
    
    config.callback = callback;
    let wrapperDom = document.getElementsByClassName('bi-toast-wrapper')[0];

    if (!wrapperDom){
        wrapperDom = document.createElement('div');
        wrapperDom.className = 'bi-toast-wrapper';
        document.body.appendChild(wrapperDom);
    }

    let dom = document.createElement('div');
    
    wrapperDom.appendChild(dom);

    let app  = Vue.createApp(BiToastComponent,config);

    let object = app.mount(dom);
    object._dom =  dom;
    let list = localStorage.getItem('bi-toast-list');

    config.time =  new Date().getTime();
    if (list) {
        list = JSON.parse(list);
        list.push(config);
        localStorage.setItem('bi-toast-list',JSON.stringify(list));
    } else {
        list = [config];
        localStorage.setItem('bi-toast-list',JSON.stringify(list));
    }


    if (typeof top.__bi_toast_update == 'function'  ) top.__bi_toast_update();
    
    object.show();
}

function loading(message = true){

    
    let wrapperDom = document.getElementsByClassName('bi-loading-wrapper')[0];

    let show = true;

    if (typeof message == 'string'){
        show = true;
    }



    if (message === false) show = false;
    if (message === true) message = '请稍后...';

    if (show ){
        if (!wrapperDom){
            let dom = document.createElement('div');
            document.body.appendChild(dom);
            dom.classList.add('bi-loading-wrapper');

            top.biIndex += 10;
            dom.style.zIndex = top.biIndex ;

            let app =  Vue.createApp(BiLoadingComponent,{text:message});
            let object  = app.mount(dom);
        }
    }else{
        if (wrapperDom) wrapperDom.remove();
    }
}


function messageHtml(type,text){
    return `<div class="bi-message bi-message-${type}">${text}</div>`;
}


export default {
    dialog,
    alert,
    loading,
    confirm,
    toast
}